<template>
  <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
    :style="{ height: pageHeight + 'px' }">
    <view class="package_sale" v-for="(item,index) in orderLists" :key="index"
      @click="navTo('Sale/Information/richText?type=Notice&id=' + item.id)">
      <view class="space-between">
        <view>{{item.title}}</view>
        <view>{{item.createtime}}</view>
      </view>
      <view class="text">{{item.subtitle}}</view>
    </view>
    <Popu v-if="orderLists.length<1" :pageHeight="pageHeight" text="暂无消息"></Popu>
  </scroll-view>
</template>

<script setup lang="ts">
  import { navTo } from '@/utils/navigator';
  import Popu from '@c/earthPushing/common/popu.vue';
  import { ref } from 'vue';
  import { getNotice } from '@/gql/earthPushing/user';
  import { toPublish } from '@mqtt';
  import { getDriverID } from '@/stores/driverID';
  const staff_id = getDriverID();

  const orderLists = ref([]);
  const isLoading = ref(false);
  const lastPage = ref(1);
  const currentPage = ref(1);

  const pageHeight = ref();
  uni.getSystemInfo({
    success: function (res) {
      pageHeight.value = res.windowHeight - 230;
    },
  });
  init()
  function init() {
    isLoading.value = true;
    const payload = {
      query: getNotice,
      variables: {
        page: currentPage.value,
        staff_id,
      },
    };
    toPublish(
      'ql/staff/getNotice',
      payload,
      (obj : any) => {
        const { getNotice } = obj.data;
        isLoading.value = false;
        orderLists.value = [...orderLists.value, ...getNotice.list];
        lastPage.value = getNotice.lastpage;
      },
    );
  }
  /**
   * 加载更多
   */
  function loadMore() {
    if (currentPage.value < lastPage.value) {
      currentPage.value++;
      init();
    }
  }
</script>

<style scoped lang="less">
  .text {
    margin-top: 15rpx;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #666;
    font-size: 26rpx;
  }
</style>